---
title: Watermark
icon: Waves
---

<MetaData
  lang="en-US"
  meta={{
    plugins: [{
      client: '@univerjs/watermark',
      facade: '@univerjs/watermark/facade',
    }],
    server: 'No',
  }}
/>

Watermark feature aims to provide a flexible and secure watermark solution for spreadsheets. It allows developers to add text or image watermarks to spreadsheets and offers various configuration options to customize the appearance and behavior of the watermark.

<PlaygroundFrame lang="en-US" slug="sheets/watermark" clickToShow />

## Preset Mode

Watermark does not provide a preset, but it supports mixing with its plugins.

### Installation

```package-install
npm install @univerjs/watermark
```

### Usage

```typescript
import { UniverWatermarkPlugin } from '@univerjs/watermark' // [!code ++]

import '@univerjs/watermark/facade' // [!code ++]

const { univerAPI } = createUniver({
  // ...
  presets: [
    UniverSheetsCorePreset(),
  ],
  plugins: [
    [UniverWatermarkPlugin, { // [!code ++]
      textWatermarkSettings: { // [!code ++]
        content: 'Hello, Univer!', // [!code ++]
        fontSize: 36, // [!code ++]
      }, // [!code ++]
    }], // [!code ++]
  ],
})
```

## Plugin Mode

### Installation

```package-install
npm install @univerjs/watermark
```

### Usage

```typescript
import { UniverWatermarkPlugin } from '@univerjs/watermark' // [!code ++]

import '@univerjs/watermark/facade' // [!code ++]

const univer = new Univer({
  // ...
})

univer.registerPlugin(UniverWatermarkPlugin, { // [!code ++]
  textWatermarkSettings: { // [!code ++]
    content: 'Hello, Univer!', // [!code ++]
    fontSize: 36, // [!code ++]
  }, // [!code ++]
}) // [!code ++]
```

### Plugins and Configuration

#### @univerjs/watermark

This plugin provides the core implementation of watermark functionality. It allows developers to add text or image watermarks to applications and offers various configuration options to customize the appearance and behavior of the watermark. It provides the `UniverWatermarkPlugin` plugin.

Reference: [@univerjs/watermark](/reference/packages/plugins/univerjs/watermark)

## Facade API

### Set Watermark

```typescript
univerAPI.addWatermark('text', { content: 'hello', repeat: true })
```

### Remove Watermark

```typescript
univerAPI.deleteWatermark()
```
